<template>
  <div class="dataStatistics">
    <!-- 中国地图的容器 -->
    <div id="China_map" style="height: 600px"></div>
    <!-- 内蒙古自治区的容器 -->
    <h3>请选择要查看的城市：</h3>
    <select v-model="ChooseName">
        <option v-for="(item,index) in chinaCovidData" :key="index" :value="item.name" @click="ChooseMap(ChooseName)">{{item.name}}</option>
    </select>
    <div ref="Neimenggu_map" style="height:500px"></div>
  </div>
</template>

<script>
import axios from "axios";
const pinyin = require('js-pinyin');
export default {
  data() {
    return {
      // 中国疫情数据
      chinaCovidData: [],
      neimengguCovidData: [],
      // 选中的名字
      ChooseName: "广西",
    };
  },
  // 一般情况下，图表类的生成方式都是在mountend生命周期中去进行
  //
  mounted() {
    // 自动获取中国疫情相关英文created生命周期知识完成了data和methods的初始化，并没有完成DOM的加载的数据
    this.getChinaCovidData();
  },
  methods: {
    // 获取选中的名字
    ChooseMap(name){
      this.ChooseName = name
      console.log(this.ChooseName,'00');
      this.getChinaCovidData() 
    },

    // 获取中国疫情相关的数据
    getChinaCovidData() {
      axios({
        url: "https://api.muxiaoguo.cn/api/epidemic?type=epidemicInfectionData&api_key=6f46fea09e825b0b",
      }).then((res) => {
        // console.log(res.data.data);
        // JS 数组API map
        this.chinaCovidData = res.data.data.map((item) => {
          return {
            name: item.provinceShortName,
            value: item.currentConfirmedCount,
          };
        });
        // 自动加载中国地图
        this.loadChinaMap();

        // 筛选广西壮族自治区的数据
        // 过滤去广西的数据 filter
        console.log( res.data.data,'lisy');
        let neimengguRes = res.data.data.filter((item) => {
          console.log(this.ChooseName,'name');
          return item.provinceShortName == this.ChooseName;
        });
        console.log(neimengguRes[0].cities,'kkk');//
        // 再将内蒙古的数据转换成我们想要的数据格式
        this.neimengguCovidData = neimengguRes[0].cities.map((item) => {
          return {
            name: item.cityName,
            value: item.currentConfirmedCount,
          };
        });
        console.log(this.neimengguCovidData,'shuju');
        // 自动加载内蒙古地图
        this.loadNeimengguMap();
        //      console.log(this.guangxiCovidData);
      });
    },
    // 加载中国地图
    loadChinaMap() {
      // 初始化图表
      new Highcharts.Map("China_map", {
        title: {
          text: "各省市现有疫情确诊情况",
        },
        // 颜色轴
        colorAxis: {
          // 分区间进行色块的处理
          dataClasses: [
            {
              // 对应区间的颜色
              color: "rgb(233,240,247)",
              // 从哪开始
              from: 0,
            },
            {
              // 对应区间的颜色
              color: "rgb(255,244,239)",
              // 从哪开始
              from: 1,
              // 到哪结束
              to: 9,
            },
            {
              // 对应区间的颜色
              color: "rgb(255,231,221)",
              // 从哪开始
              from: 10,
              // 到哪结束
              to: 99,
            },
            {
              // 对应区间的颜色
              color: "rgb(253,177,155)",
              // 从哪开始
              from: 100,
              // 到哪结束
              to: 499,
            },
            {
              // 对应区间的颜色
              color: "rgb(231,133,109)",
              // 从哪开始
              from: 500,
              // 到哪结束
              to: 999,
            },
            {
              // 对应区间的颜色
              color: "rgb(222,81,47)",
              // 从哪开始
              from: 1000,
              to: 9999,
            },
            {
              color: "rgb(151,10,15)",
              from: 10000,
            },
          ],
        },

        series: [
          {
            data: this.chinaCovidData,
            name: "现存数量",
            mapData: Highcharts.maps["cn/china"],
            joinBy: "name", // 根据 name 属性进行关联
          },
        ],
        // 地图的一些导航相关配置
        mapNavigation: {
          enableButtons: true, // 是否启用缩放按钮
        },
      });
    },
    loadNeimengguMap() {
      // console.log();
      // 初始化图表
      console.log(pinyin.getFullChars(this.ChooseName).toLowerCase(),'iii');
      new Highcharts.Map(this.$refs["Neimenggu_map"], {
        title: {
          text: this.ChooseName+"疫情确诊情况",
        },
        colorAxis: {
          dataClasses: [
            {
              // 对应区间的颜色
              color: "rgb(233,240,247)",
              // 从哪开始
              from: 0,
            },
            {
              // 对应区间的颜色
              color: "rgb(255,244,239)",
              // 从哪开始
              from: 1,
              // 到哪结束
              to: 5,
            },
            {
              // 对应区间的颜色
              color: "rgb(255,231,221)",
              // 从哪开始
              from: 6,
              // 到哪结束
              to: 10,
            },
            {
              // 对应区间的颜色
              color: "rgb(253,177,155)",
              // 从哪开始
              from: 11,
              // 到哪结束
              to: 15,
            },
            {
              // 对应区间的颜色
              color: "rgb(231,133,109)",
              // 从哪开始
              from: 16,
              // 到哪结束
              to: 20,
            },
            {
              // 对应区间的颜色
              color: "rgb(222,81,47)",
              // 从哪开始
              from: 21,
              to: 100,
            },
            {
              color: "rgb(151,10,15)",
              from: 1000,
            },]
        },
        series: [
          {
            data: this.neimengguCovidData,
            name: "随机数据",
            // mapData: Highcharts.maps["cn/guangxi"],
            mapData: Highcharts.maps["cn/"+pinyin.getFullChars(this.ChooseName).toLowerCase()],
            joinBy: "name", // 根据 name 属性进行关联
          },
        ],
      });

      // this.ToPinyin(this.ChooseName)
    },
  },
  watch:{
    ChooseName(){
      console.log(this.ChooseName,'777');
      this.ChooseName=this.ChooseName;
      this.loadNeimengguMap();
    }
  }
};
</script>

<style scoped>
h3 {
  display: inline-block;
  width: 200px;
  margin-left: 300px;
}
</style>